<template>
  <v-container fluid fill-height>
    <v-layout align-center justify-center>
      <v-flex xs12 sm8 md4>
        <v-card :elevation="4">
          <v-card-title primary-title>
            <h4>登录</h4>
          </v-card-title>
          <v-card-text>
            <v-form ref="loginForm" v-model="valid">
              <v-text-field
                v-model="username"
                prepend-icon="mdi-account"
                name="Username"
                label="用户名"
                :rules="[() => !!username || '用户名为空']"
              ></v-text-field>
              <v-text-field
                v-model="password"
                :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
                @click:append="showPassword = !showPassword"
                :type="showPassword ? 'text' : 'password'"
                prepend-icon="mdi-lock"
                name="Password"
                label="密码"
              ></v-text-field>
            </v-form>
          </v-card-text>
          <v-card-actions>
            <v-btn color="primary" large block :to="{ name: '课程' }"
              >登录</v-btn
            >
          </v-card-actions>
        </v-card>
      </v-flex>
    </v-layout>
  </v-container>
</template>
<script>
export default {
  data: () => ({
    showPassword: "password"
  })
};
</script>
